<!--  -->
<template>
  <div class="domain-view">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="绑定域名" name="1">
        <div class="notice_t">
          <i class="el-icon-info" style="color:#E6A23C;"></i>
          <div class="nt_p">
            <p>解析提示：请前往域名提供商添加两条解析记录。记录类型为CNAME，主机记录分别为“@”和“www”，记录值为“{{domainDefaultName}}”。</p>
             <p>友情提示：通用顶级域名解析是2小时内生效，国家顶级域名解析24小时内生效。</p>
          </div>
          <div class="guideshow"><div class="guideshow-btn" @click="guideShow1"><i class="el-icon-question"></i>功能引导</div></div>
        </div>
        <DomainList />
        <DialogDomainGuide ref="domainGuide"/>
      </el-tab-pane>
      <el-tab-pane label="域名重定向" name="2">
        <div class="notice_t">
          <i class="el-icon-info" style="color:#E6A23C;"></i>
          <div class="nt_p">
            <p>当用户向网站服务器发出浏览请求时，服务器返回的HTTP数据流中头信息(header)中的状态码的一种，表示本网页永久性转移到另一个地址。</p>
            <p>通过访问域名跳转到目标域名方式实现301重定向</p>
          </div>
          <div class="guideshow"><div class="guideshow-btn" @click="guideShow2"><i class="el-icon-question"></i>功能引导</div></div>
        </div>
        <DomainRedirectList />
        <DialogDomainRedirectGuide ref="domainRedirectGuide"/>
      </el-tab-pane>
      <el-tab-pane label="链接重定向" name="4">
        <div class="notice_t">
          <i class="el-icon-info" style="color:#E6A23C;"></i>
          <div class="nt_p">
            <p>当用户向网站服务器发出浏览请求时，服务器返回的HTTP数据流中头信息(header)中的状态码的一种，表示本链接永久性转移到另一个链接。</p>
            <p>通过访问链接跳转到目标链接方式实现301重定向</p>
          </div>
          <div class="guideshow"><div class="guideshow-btn" @click="guideShow3"><i class="el-icon-question"></i>功能引导</div></div>
        </div>
        <LinkRedirectList />
        <DialogLinkRedirectGuide ref="linkRedirectGuide"/>
      </el-tab-pane>
      <el-tab-pane label="SSL证书" name="3">
        <div class="notice_t">
          <i class="el-icon-info" style="color:#E6A23C;"></i>
          <div class="nt_p">
            <p>服务器类型：请选择Nginx</p>
          </div>
        </div>
        <DomainSSLList />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import TipColla from '@/components/common/TipColla.vue'
import DomainList from '@/components/main/user/host/domain/DomainList.vue'
import DomainRedirectList from '@/components/main/user/host/domain/DomainRedirectList.vue'
import LinkRedirectList from '@/components/main/user/host/domain/LinkRedirectList.vue'
import DomainSSLList from '@/components/main/user/host/domain/DomainSSLList.vue'
import DialogDomainGuide from '@/pages/backend/guide/DialogDomainGuide.vue'
import DialogDomainRedirectGuide from '@/pages/backend/guide/DialogDomainRedirectGuide.vue'
import DialogLinkRedirectGuide from '@/pages/backend/guide/DialogLinkRedirectGuide.vue'
import storageGuide from '@/core/storageGuide.js'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  created () {
    this.$post('/domain/infos-list').then(response => {
      if (response && response.length > 0) {
        let domainData = response
        this.domainDefaultName = ''
        domainData.forEach(item => {
          if (item.domainType === 0) {
            this.domainDefaultName = item.domainName
          }
        })
      } else {
        this.domainData = ''
      }
    })
  },
  data () {
    return {
      activeName: '1',
      // 系统默认域名
      domainDefaultName: ''
    }
  },
  mounted () {
    // 新手导引
    let isdomainGuide = storageGuide.getGuideOptByKey('domainGuide')
    if (!isdomainGuide) {
      this.$refs['domainGuide'].show()
      storageGuide.setGuideOpt('domainGuide', true)
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name === '2') {
        let isdomainRedirectGuide = storageGuide.getGuideOptByKey('domainRedirectGuide')
        if (!isdomainRedirectGuide) {
          PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
          this.$refs['domainRedirectGuide'].show()
          storageGuide.setGuideOpt('domainRedirectGuide', true)
        }
      } else if (tab.name === '4') {
        let islinkRedirectGuide = storageGuide.getGuideOptByKey('linkRedirectGuide')
        if (!islinkRedirectGuide) {
          PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
          this.$refs['linkRedirectGuide'].show()
          storageGuide.setGuideOpt('linkRedirectGuide', true)
        }
      }
    },
    // 新手引导
    guideShow1 () {
      PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
      this.$refs['domainGuide'].show()
    },
    guideShow2 () {
      PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
      this.$refs['domainRedirectGuide'].show()
    },
    guideShow3 () {
      PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
      this.$refs['linkRedirectGuide'].show()
    }
  },
  components: {
    DomainList,
    DomainRedirectList,
    LinkRedirectList,
    DomainSSLList,
    DialogDomainGuide,
    DialogDomainRedirectGuide,
    DialogLinkRedirectGuide
  }
}
</script>

<style scoped lang="scss">
.domain-view /deep/ .el-collapse {
  border-top: 0;
}
.domain-view /deep/ .tip-colla .colla-title {
  font-weight: bold;
}
.domain-view /deep/ .el-tabs__header .el-tabs__nav-wrap {
  padding-left: 30px;
}
.domain-view /deep/ .el-tabs__header .el-tabs__item {
  font-size: 16px;
  padding:0 30px;
}
.domain-view /deep/ .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 0;
}
.domain-view /deep/ .el-tabs__header .el-tabs__item:last-child {
  padding-right: 0;
}
.notice_t {
  position: relative;
  padding-left: 25px;
  margin-top: 10px;
  color: #666;
  padding-right: 130px;
  .guideshow{
    position:absolute;
    right: 50px;
    top: 0;
    line-height: 20px;
    .guideshow-btn{
      color: #258FFB;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      i.el-icon-question {
        font-size: 16px;
        margin-right: 3px;
        margin-bottom: 2px;
        vertical-align: middle;
      }
    }
  }
}
.notice_t i.el-icon-info {
  position: absolute;
  color: #bbb;
  left: 0;
  top: 2px;
}
</style>
